<!--
 Copyright European Organization for Nuclear Research (CERN)

 Licensed under the Apache License, Version 2.0 (the "License");
 You may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0

 Authors:
 - Jaroslav Guenther <jaroslav.guenther@gmail.com>, 2019-2020
 - Patrick Austin <patrick.austin@stfc.ac.uk>, 2020
 - Thomas Beermann <thomas.beermann@cern.ch>, 2020
 - Mario Lassnig <mario.lassnig@cern.ch>, 2021
-->

{% set buttons = ["btn btn-block btn-outline-warning btn-lg", "btn btn-block btn-outline-info btn-lg", "btn btn-block btn-outline-danger btn-lg"] %}
{% set original_buttons = ["btn btn-block btn-outline-warning btn-lg", "btn btn-block btn-outline-info btn-lg", "btn btn-block btn-outline-danger btn-lg"] %}

<!DOCTYPE html>
<html>

<head>
  <title>Rucio UI - Select Login Method</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="shortcut icon" href="/media/favicon.ico" type="image/x-icon">
  <link rel="icon" href="/media/favicon.ico" type="image/x-icon">
</head>

<body>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function get_link(elmnt, base_url) {
  var url = '/' + base_url + '?' + 'account='+document.getElementById('accountname').value+'&vo='+document.getElementById('voname').value;
  if (elmnt.href.indexOf('/ui/') != -1) {
    url = '/ui' + url;
  }
  elmnt.href = url;
}
</script>
<script type="text/javascript">
function get_link_oidc(elmnt, base_url, issuer) {
  var url = '/' + base_url + '?' + 'account='+document.getElementById('accountname').value+'&vo='+document.getElementById('voname').value+'&issuer='+issuer;
  if (elmnt.href.indexOf('/ui/') != -1) {
    url = '/ui' + url;
  }
  elmnt.href = url;
}
</script>
<link rel="stylesheet" href="/static/select_login_method.css">
<!--  move the functional part of this template to JS
<input id='oidc_issuers' type="hidden" value="$oidc_issuers">
<script src="/static/select_login_method.js"></script>
-->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">

<div class="container">
  <div class="row">
<div class="card">
<article class="card-body">
  <h4 class="card-title text-center mb-4 mt-1"><img src="/media/RucioUI.png" width="450px"></h4>
  <hr>
  <p class="text-success text-center">Choose Login Method</p>
  <p>
    <a href="" class="btn btn-block btn-outline-primary btn-lg" role="button" onclick="get_link(this, 'x509')" height="auto"><i class="fab fa-2x icon-certificate vertical-align-middle"></i><span class="inline-block padding-bottom-2">   X509 Certificate</span></a>
    <a href="" class="btn btn-block btn-outline-rucio btn-lg" role="button" onclick="get_link(this, 'login')" height="auto"> <i class="fab fa-2x icon-rucio vertical-align-middle"></i><span class="inline-block padding-bottom-2">   Rucio Userpass</span></a>
    <!-- {% if saml_support %}
        <a href="" class="btn btn-block btn-outline-cern btn-lg" role="button" onclick="get_link(this, 'saml')" height="auto"> <i class="fab fa-2x icon-cern vertical-align-middle"></i><span class="inline-block padding-bottom-2">   CERN SSO Log-In</span></a>
    {% endif %} -->

    {% for idp in oidc_issuers %}
        <a href="" class="btn btn-block btn-outline-warning btn-lg" role="button" onclick="get_link_oidc(this, 'oidc', '{{idp}}')" height="auto"><i class="fa-2x icon-openid vertical-align-middle"></i><span class="inline-block padding-bottom-2">   {{ idp }} </span></a>
    {% endfor %}

  </p>

  <form>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" style="width: 2.75em"> <i class="fa fa-user"></i> </span>
      </div>
      <input name="accountname" class="form-control" placeholder="Optionally specify Rucio account name ..." type="accountname" id="accountname" value="">
    </div> <!-- input-group.// -->
    {# TODO: Fix multi-VO buttons #}
    {#{% if possible_vos %}
        <div class="input-group">
          <label style="color:red; line-height:21pt; text-align: center;">Unable to login, multiple VOs found for given identity. Please select a VO and try again:</label>
          <div class="input-group-prepend">
            <span class="input-group-text" style="width: 2.75em"> <i class="fa fa-desktop"></i> </span>
          </div>
          <select name="voname" class="form-control" type="voname" id="voname">
          <option selected></option>
          $for possible_vo in possible_vos:
              <option value=$possible_vo[0]>$possible_vo[1] - $possible_vo[0]</option>
        </div> <!-- input-group.// -->
    $else:#}
        <input type="hidden" name="voname" id="voname"/>
  </div> <!-- form-group// -->
  </form>
</article>
</div>
</div> <!--container end.//-->



</body>
</html>
